<template>
  <div>
    <ProTable
      :columns="columns"
      :data-source="activities"
      :loading="isFetching"
    >
      <template #extraL>
        <a-input-search
        style="width: 300px; margin-right: 10px"
        v-model:value="searchValue"
        placeholder="请输入标题搜索"
          @search="onSearch"
      />
      <a-button
        style="margin-right: 20px"
        class="mr10"
        type="primary"
        enter-button
        @click="onSearch()"
      >
        搜索
      </a-button>
        <a-button
          type="primary"
          @click="handleEdit()"
        >
          新增
        </a-button>
        <a-button
          class="mr10"
          type="primary"
          @click="reLoad()"
        >
          刷新
        </a-button>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'image'">
          <img
            :src="record.image"
            style="width: 50px; height: 50px"
          />
        </template>
        <template v-if="column.dataIndex === 'price'">
          {{ record.price / 100 }}
        </template>
        <template v-if="column.dataIndex === 'start'">
          {{ record.start }}
          <br />
          {{ record.deadline }}
        </template>

        <template v-if="column.dataIndex === 'condition'">
          <a-tag
            color="green"
            v-if="record.condition == 0"
          >
            普通用户
          </a-tag>
          <a-tag
            color="cyan"
            v-if="record.condition == 8"
          >
            VIP用户
          </a-tag>
        </template>

        <template v-if="column.dataIndex === 'enrollment'">
          {{ record.Enrolls.length }}
        </template>
        <template v-if="column.dataIndex === 'is_destroy'">
          <a-popconfirm
            class="gap-popconfirm"
            :title="'确定' + record.is_destroy ? '取消发布?' : '发布?'"
            ok-text="确认"
            cancel-text="取消"
            @cancel="cancelSwitch(record)"
            @confirm="handleSwitch(record)"
          >
            <a-switch v-model:checked="record.is_destroy" />
          </a-popconfirm>
        </template>

        <template v-if="column.dataIndex === 'action'">
          <span>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />

            <a-popconfirm
              class="gap-popconfirm"
              title="确定删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleDelete(record)"
            >
              <a>删除</a>
            </a-popconfirm>
            <a-divider type="vertical" /><br>
            <a @click="handleUser(record)">查看报名用户</a>
          </span>
        </template>
      </template>
    </ProTable>

    <activity-form
      ref="activityFormEle"
      @activity-added="handleActivityAdded"
    />
    <activeUsers ref="activeUserEle"></activeUsers>
  </div>
</template>

<script setup>
  import axios from 'axios'
  import { ref, onMounted, reactive } from 'vue'
  import { useRouter } from 'vue-router'

  import ActivityForm from './ActivityForm.vue'
  import activeUsers from './activeUsers.vue'
  import { message } from 'ant-design-vue'
  import { activeList, activeDel, activeUpdate, activeUser, activeDestroy } from '@/api/index'
  const activities = ref([])
  const columns = [
    // { activity_id: 'ID' },
    { title: '标题', ellipsis: true },
    {
      image: '主图',
      width: '100px'
    },
    {
      price: '价格',
      width: '80px'
    },
    {
      enrollment: '已报名',
      width: '200px'
    },
    {
      activity_time: '活动时间',
      width: '120px',
      dataIndex: 'activity_time',
    },
    {
      start: '报名时间',
      width: '4000px',
      dataIndex: 'start',
    },
    // {
    //   deadline: '报名截至时间'
    // },
    {
      condition: '可参与用户',
      width: '260px'
    },
    {
      is_destroy: '是否发布',
      width: '200px'
    },
    {
      sort: '排序',
      width: '80px'
    },
    { created_at: '创建时间', width: '120px' },
    {
      action: {
        title: '操作',
        width: '120px',
        fixed: 'right'
      }
    }
  ]

  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })

  const activityFormEle = ref()

  const router = useRouter()
  const isFetching = ref(false)
  const searchValue=ref("")
 const onSearch=()=>{
  pagination.current=1
  getList()
 }
  const getList = () => {
    activeList({
      page: pagination.current,
      title:searchValue.value,
      pageSize: pagination.pageSize
    })
      .then((response) => {
        if (response.errorCode) {
          message.error(response.msg || '操作失败')
          return
        }
        pagination.total = response.total
        activities.value = response.data
      })
      .catch((error) => {
        message.error(error.msg || '获取活动列表失败')
      })
  }
  getList()

  const handleSwitch = (row) => {
     
    activeDestroy({
      activity_id: row.activity_id,

      is_destroy: row.is_destroy
    })
      .then((res) => {
        if (res.errorCode) {
          row.is_destroy = !row.is_destroy
          message.error(res.msg || '操作失败')
          return
        }
        message.success('操作成功！')
        getList()
      })
      .catch((error) => {
        message.error(error.msg || '操作失败')
        row.is_destroy = !row.is_destroy
      })
  }
  const cancelSwitch = (row) => {
    row.is_destroy = !row.is_destroy
  }
  // 编辑
  const handleEdit = (row) => {
    activityFormEle.value.init(row)
  }
  const activeUserEle = ref(null)
  const handleUser = (row) => {
    activeUserEle.value.init(row)
  }
  const handleDelete = (row) => {
    activeDel({ activity_id: row.activity_id })
      .then((res) => {
        if (res.errorCode) {
          message.error(res.msg || '操作失败')
          return
        }
        message.success('操作成功！')
        getList()
      })
      .catch((error) => {
        message.error(error.msg || '操作失败')
      })
  }

  const handleActivityAdded = () => {
    pagination.current = 1
    getList() // Refresh activity list after adding
  }
  const reLoad = () => {
    pagination.current = 1
    getList()
  }

  // onMounted(fetchActivities);
</script>

<style scoped>
  /* Add your scoped styles here */
</style>
